<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>欢迎来到affgo</title>
    <link rel="stylesheet" href="/static/content/index.css" type="text/css">
    <link rel="stylesheet" href="/static/layui/css/layui.css" type="text/css">
    <style>
        .layer-form {
            padding: 10px;
        }
    </style>
</head>

<body>
    <canvas class="cavs" width="1575" height="1337"></canvas>

    <div class="loginmain">
        <div class="login-title">
            <span>AFFGO成员登录</span>
        </div>

        <div class="login-con">
            <div class="login-user">
                <div class="icon">
                    <img src="/static/image/user_icon_copy.png" alt>
                </div>
                <input type="text" id="username" name="username" placeholder="用户名" autocomplete="off" value>
            </div>
            <div class="login-pwd">
                <div class="icon">
                    <img src="/static/image/lock_icon_copy.png" alt>
                </div>
                <input type="password" id="password" name="pwd" placeholder="密码" autocomplete="off" value>
            </div>
            <div class="login-yan">
                <div class="icon">
                    <img src="/static/image/key.png" alt>
                </div>
                <input type="text" id="captcha_code" name="captcha" placeholder="验证码" autocomplete="off" value>
                <div style="float: right;height: 40px;position: relative;top:-40px">
                    <img class="captcha" style="height:40px ;cursor: pointer;"
                        src="{:url('/member/validate/create')}" />
                </div>
            </div>
            <div class="login-btn">
                <input id="doLogin" type="button" value="登录">
            </div>
            <div class="login-btn" style="position: relative; top: 60px;">
                <input id="doReg" type="button" value="注册">
            </div>
        </div>

    </div>
</body>

</html>


<script id="regForm" type="text/html">
    <div class="layer-form">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-block">
					<input type="text" name="username" id="username" autocomplete="off" placeholder="请输入账号" class="layui-input">
				</div>
			</div>

            <div class="layui-form-item">
				<label class="layui-form-label">昵称</label>
				<div class="layui-input-block">
					<input type="text" name="nickname" id="nickname" autocomplete="off" placeholder="请输入昵称" class="layui-input">
				</div>
			</div>

            <div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="password" name="password" id="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
				</div>
			</div>

            <div class="layui-form-item">
				<label class="layui-form-label">确认密码</label>
				<div class="layui-input-block">
					<input type="password" name="rePwd" id="rePwd" autocomplete="off" placeholder="请输入密码" class="layui-input">
				</div>
			</div>

            <div class="layui-form-item">
				<label class="layui-form-label">QQ</label>
				<div class="layui-input-block">
					<input type="text" name="qq" id="qq" autocomplete="off" placeholder="请输入QQ" class="layui-input">
				</div>
			</div>

            <div class="layui-form-item">
				<label class="layui-form-label">b站uid</label>
				<div class="layui-input-block">
					<input type="text" name="bilibili_uid" id="bilibili_uid" autocomplete="off" placeholder="请输入b站uid" class="layui-input">
				</div>
			</div>

            <div class="layui-row">
                <div class="layui-col-xs7">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-vercode"></i>
                    </div>
                    <input type="text" name="code" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                  </div>
                </div>
                <div class="layui-col-xs5">
                  <div style="margin-left: 10px;">
                    <img style="cursor: pointer;" src="{:url('/member/validate/create')}" class="captcha" >
                  </div>
                </div>
              </div>
            
            <div class="layui-form-item" style="margin-left: 120px;">
				<button class="layui-btn" lay-submit lay-filter="regSubmit">注册</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>



        </form>
    </div>
</script>

<script src="/static/content/jquery.min.js"></script>
<script src="/static/layui/ext/layer/layer.js"></script>
<script src="/static/content/ban.js"></script>
<script src="/static/md5/md5.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    window.onload = () => {
        $(".captcha").click(() => {
            $(".captcha").attr("src", "{:url('/member/validate/create')}?" + Math.random())
        });

        $("#doLogin").click(() => {
            let username = $("#username").val();
            let password = md5($("#password").val());
            let code = $("#captcha_code").val();
            let sdata = {
                username: username,
                password: password,
                code: code
            };

            $.ajax({
                url: "{:url('/member/login/dologin')}",
                type: "post",
                data: sdata,
                success: res => {
                    if (res.code !== 0) {
                        $(".captcha").attr("src", "{:url('/member/validate/create')}?" + Math.random());
                        layer.msg(res.msg);
                    } else {
                        window.location.href = "{:url('/member/index/index')}";
                    }
                }
            });
        });

        $("#doReg").click(() => {
            let layero = layer.open({
                type: 1,
                area: ['50%', '70%'], // 宽高
                content: $("#regForm").html(),
                title: "注册",
                success: () => {
                    $(".captcha").click(() => {
                        $(".captcha").attr("src", "{:url('/member/validate/create')}?" + Math.random())
                    });

                    layui.use(() => {
                        let form = layui.form;

                        form.on('submit(regSubmit)', function (data) {
                            var field = data.field; // 获取表单字段值

                            if (field.password != field.rePwd) {
                                layer.msg("两次密码输入不一致");
                            } else {
                                field.password = md5(field.password);
                                $.ajax({
                                    url: "{:url('/member/login/doreg')}",
                                    type: "POST",
                                    data: field,
                                    success: function (res) {
                                        if (res.code === 0) {
                                            layer.msg(res.msg, { icon: 1 });
                                            layer.close(layero);
                                        } else {
                                            layer.msg(res.msg, { icon: 2 });
                                        }
                                        $(".captcha").attr("src", "{:url('/member/validate/create')}?" + Math.random());
                                    }
                                })
                            }

                            return false; // 阻止默认 form 跳转
                        });
                    });
                }
            });
        });


    }
</script>